import React, { PureComponent } from 'react'
import { Card, Button, Table, Modal, message } from 'antd';
import LinkButton from '../../components/link-button/link-button'
import { formateDate } from '../../config/dateUtils'
import { reqUserList, reqAddUser, reqDeleteUser, reqUpdateUser } from '../../api/index'
import AddUpdateForm from './add-update-form'
import throttle from 'lodash.throttle'
import { PAGE_SIZE } from '../../utils/constants'

export default class User extends PureComponent {
  state = {
    // 获取用户的列表数据
    users: [],
    // 获取角色的列表数据
    roles: [],
    isShowStatus: 0, // 0:不显示 1：显示添加  2：显示修改
    isLoading: false
  }

  // 初始化列表数据
  initTable = () => {
    this.columns = [
      {
        title: '用户名',
        dataIndex: 'username'
      },
      {
        title: '邮箱',
        dataIndex: 'email',
      },
      {
        title: '电话',
        dataIndex: 'phone',
      },
      {
        title: '注册时间',
        dataIndex: 'create_time',
        render: (create_time) => formateDate(create_time)
      },
      {
        title: '所属角色',
        dataIndex: 'role_id',
        // 判断roles._id===role_id是否相等，相等就找出他们的名字
        render: (role_id) => this.state.roles.find(roles => roles._id === role_id).name
      },
      {
        title: '操作',
        render: (user) => (
          <span>
            <LinkButton onClick={() => {
              // 父组件将数据存到公用的地方
              this.user = user
              this.updateUser(user)
            }}>修改</LinkButton>
            <LinkButton onClick={() => { this.deleteUser(user) }}>删除</LinkButton>
          </span>
        ),
      },
    ];
  }

  // 删除用户
  deleteUser = (user) => {
    Modal.confirm({
      title: '温馨提示',
      content: `您确定要删除 ${user.username} 用户吗?`,
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk: async () => {
        // 发送请求
        const result = await reqDeleteUser(user._id)
        // 判断是否成功
        if (result.status === 0) {
          message.success('删除用户成功')
          // 重新渲染列表数据
          this.getUserList()
        }
      }
    });

  }

  // 更新用户
  updateUser = () => {
    this.setState({ isShowStatus: 2 })
  }

  // 表单校验提交数据
  handleAddUser = (e) => {
    e.preventDefault();
    this.form.validateFields(throttle(async (err, values) => {
      if (!err) {
        let result
        // 添加页面
        if (this.state.isShowStatus === 1) {
          // 收集表单数据
          const { username, password, phone, email, role_id } = values
          // 发送请求
          result = await reqAddUser(username, password, phone, email, role_id)
          
        } else if (this.state.isShowStatus === 2) {
          // 收集表单数据
          const { username, phone, email, role_id } = values
          const _id = this.user._id
          const user = { _id, username, phone, email, role_id }
          // 发送请求
          result = await reqUpdateUser(user)
        }

        // 重置添加输入框的值
        this.form.resetFields()
        // 弹框消失
        this.setState({
            showStatus: 0,
        });

       const action = this.state.showStatus === 1 ? '添加' : '修改'
       // 校验是否添加成功
       if (result.status === 0) {
           message.success(action + '用户成功')
           // 重新获取分类数据列表
           this.getcategoryList()
       } else {
           message.error(result.msg)
       }
      }
    }, 2000));
  }

  // 获取用户列表数据
  getUserList = async () => {
    // 发送请求之前
    this.setState({ isLoading: true })
    // 发送请求
    const result = await reqUserList()
    // 判断是否请求成功
    if (result.status === 0) {
      // 获取数据
      const { users, roles } = result.data
      // 将数据存储到state的data中
      this.setState({
        isLoading: false,
        users,
        roles
      })
    }
  }

  UNSAFE_componentWillMount() {
    this.initTable()
    // 
  }

  componentDidMount() {
    this.getUserList()
  }

  render() {
    const title = (
      <Button type="primary" onClick={() => {
        this.user = null
        this.setState({ isShowStatus: 1 })
      }}>创建用户</Button>
    )

    // 获取this中的user，但是在render中使用，有可能是添加就没有值为undefined，需要给添加定义为一个空对象，修改分类才有值
    const user = this.user || {}

    return (
      <div>
        <Card title={title}>
          <Table
            columns={this.columns}
            dataSource={this.state.users}
            bordered
            rowKey="_id"
            pagination={{ defaultPageSize: PAGE_SIZE }}
            loading={this.state.isLoading}
          />
        </Card>

        {/* 添加或修改的弹框 */}
        <Modal
          title={this.state.isShowStatus === 1 ? '添加用户' : '修改用户'}
          visible={this.state.isShowStatus !== 0}
          onOk={this.handleAddUser}
          onCancel={() => {
            this.form.resetFields()
            this.setState({ isShowStatus: 0 })
          }

          }
        >
          {/* 接收子组件传递的表单数据 */}
          <AddUpdateForm setForm={form => this.form = form} roles={this.state.roles} user={user} />
        </Modal>
      </div>
    )
  }
}
